<template>
  <div>
    <!--  8.7 根据点击的不同的功能切换不同的标题 -->
    <el-dialog
      :title="info.type === 'add' ? '新增分类' : '编辑分类'"
      :visible.sync="info.isshow"
      width="50%"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 分类名称 -->
        <el-form-item label="轮播图名称" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <!-- 分类图片 -->
        <el-form-item label="轮播图图片" prop="img">
          <!-- action：上传的地址 -->
          <!-- auto-upload:是否自动上传 -->
          <!-- list-type：组件的形式:照片墙 -->
          <!-- on-preview：预览图片时执行的函数 -->
          <!-- on-remove：移除图片时执行的函数 -->
          <!-- on-change：修改文件时执行的函数 -->
          <!-- file-list:历史文件列表 -->
          <!-- limit:最大允许上传个数 -->
          <!-- on-exceed:文件超出个数限制时的钩子 -->
          <el-upload
            action="#"
            :auto-upload="false"
            list-type="picture-card"
            :on-remove="handleRemove"
            :on-change="handleChange"
            :file-list="fileList"
            :limit="1"
            :on-exceed="handlerExceed"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <!-- 状态选项 -->
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 结束 -->
        <!--  8.9 通过不同的功能创建不同的按钮 -->
        <el-form-item>
          <el-button
            v-if="info.type === 'add'"
            type="success"
            @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button v-else type="primary" @click="submitForm('ruleForm')"
            >立即修改</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
/* 01. 导入分类接口 */
import { bannerAdd, bannerEdit } from "../../api.js";
export default {
  data() {
    return {
      // 历史图片列表
      fileList: [],

      ruleForm: {
        title: "",
        img: "",
        status: 1,
      },
      rules: {
        title: [
          { required: true, message: "请输入轮播图名称", trigger: "blur" },
        ],
      },
    };
  },
  props: ["info"],
  created() {},
  methods: {
    // 9.2给表单赋值
    setValue(info) {
      // 打开弹窗，先将历史图片列表清空
      this.fileList = [];
      // 浅拷贝，数据会互相影响
      // this.ruleForm = info;
      // 9.3深拷贝，避免数据互相影响
      /* 把对象中的值结构给 另一个新对象再赋值 */
      this.ruleForm = { ...info };

      if (this.ruleForm.img) {
        // 有图片数据时再向文件列表中增加数据
        this.fileList.push({
          // 固定格式，一个对象就是一个图片，有name和url两个属性
          name: "u-admin",
          url: this.$host + this.ruleForm.img,
        });
      }
    },
    // 删除图片
    handleRemove() {
      // 把当前图片的值变成空
      this.ruleForm.img = "";
    },
    // 修改图片
    handleChange(file) {
      // console.log(file,fileList);
      this.ruleForm.img = file.raw;
    },
    // 文件超出个数限制时的钩子
    handlerExceed() {
      this.$message({
        type: "warning",
        message: "最多上传一张图片",
      });
    },
    submitForm(formName) {
      /* 10.1 提交验证，所以点击的不同功能都在这里验证，是async函数 */
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // delete this.ruleForm.first_cateid;
          // delete this.ruleForm.second_cateid;
          // delete this.ruleForm.description;

          // 上传的数据中有文件，大体积的二进制文件需要转换成formdata格式，再向后台提交
          let formdata = new FormData();
          // formdata.append("catename", this.ruleForm.catename);
          // formdata.append("img", this.ruleForm.img);
          // formdata.append("pid", this.ruleForm.pid);
          // formdata.append("status", this.ruleForm.status);
          // console.log(formdata);
          for (const key in this.ruleForm) {
            formdata.append(key, this.ruleForm[key]);
          }
          // formdata.forEach((key, name) => {
          //   console.log(name, key);
          // }); 
          console.log(this.ruleForm,'banner');
          // return
          /*  立即创建 */
          if (this.info.type === "add") {
            
           
            // 立即创建接口
            console.log(this.ruleForm);
            let res = await bannerAdd(formdata);
            // console.log(res);
          } else {
            // 10.4 编辑菜单接口
            // console.log(this.ruleForm);
            // return;
            let res = await bannerEdit(formdata);
            console.log(res, "立即修改");
            /* 10.8 通知list更新 并 渲染数据 */
            this.$emit("updata");
            /* 10.7点击立即修改后因为没有返回新的值，所以要在让list自动再请求一次最新的菜单数据渲染到页面上 \ 通过子传父，父传子的方式*/
          }
          /* 10.3 立即修改 */
          /* 10. 不管点击那个按钮这个弹窗都应该消失 */
          this.info.isshow = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      /* 10. 不管点击那个按钮这个弹窗都应该消失 */
      this.info.isshow = false;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
</style>